<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <f:metadata>
        <f:viewParam name="userid" value="#{frontController.userID}" valueChangeListener="#{frontController.logIn}"/>
    </f:metadata>
    <ui:composition template="/template.xhtml">
        <ui:define name="title">
            #{localeController.translate("FileManager")}
        </ui:define>
        <ui:define name="menuitem">FileManager.xhtml</ui:define>
        <ui:define name="body">
        </ui:define>
        <ui:define name="user">
            <h:form id="filesform" prependId="false" enctype="multipart/form-data">
                <p:dialog header="Image Detail" widgetVar="fileDialog"
                          modal="true" dynamic="true"
                          position="center center"   
                          resizable="true" showEffect="clip" hideEffect="clip"
                          width="#{fileUploadController.width+50}"
                          height="#{fileUploadController.height+50}" 
                          rendered="#{fileUploadController.selectedFile!=null}" >  
                    <h:form>
                    <p:panel id="fileDetail" style="text-align:center;" >  
                        <p:graphicImage value="/upload/#{fileUploadController.selectedFile.userName.name}/#{fileUploadController.selectedFile.name}"/>  
                        <div >#{fileUploadController.selectedFile.name}</div> 
                    </p:panel>  
                    </h:form>
                </p:dialog>
                
                    <p:dataGrid id="filegrid" var="file" value="#{fileUploadController.files}" columns="6"  
                                rows="24" paginator="true"   
                                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                rowsPerPageTemplate="24,36,60"> 
                        <p:column>  
                            <p:panel> 
                                <div style="width: 100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">#{file.name}</div> 
                                <div style="width: 100px; height:100px;overflow:hidden;">
                                    <p:commandLink  update=":filesform" oncomplete="fileDialog.show()" >  
                                        <h:graphicImage value="/upload/#{file.userName.name}/#{file.name}" width="100px"/>   
                                        <f:setPropertyActionListener value="#{file}"   
                                                                     target="#{fileUploadController.selectedFile}" />  
                                    </p:commandLink>
                                </div>
                                <p:commandButton  update=":filesform" oncomplete="fileDialog.show()" image="ui-icon-search">  
                                    <f:setPropertyActionListener value="#{file}"   
                                                                 target="#{fileUploadController.selectedFile}" />  
                                </p:commandButton>  
                                <p:commandButton update=":filesform" image="ui-icon-cancel" action="#{fileUploadController.removeFile()}">  
                                    <f:setPropertyActionListener value="#{file}"   
                                                                 target="#{fileUploadController.selectedFile}" />  
                                </p:commandButton>  

                                
                            </p:panel>  
                        </p:column> 
                    </p:dataGrid>
                    <h:outputLabel id="ajx">
                        <f:ajax event="click" listener="#{fileUploadController.refreshFiles()}" render=":filesform" />
                    </h:outputLabel>
                    <script>
                        function update_file_list(){
                            document.getElementById("ajx").onclick();
                        }
                    </script>
                    <p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"  
                                  mode="advanced"   
                                  update="messages"
                                  oncomplete="update_file_list()"
                                  sizeLimit="100000"   
                                  multiple="true"
                                  cancelLabel="#{bundle.Cancel}"
                                  uploadLabel="#{bundle.Upload}"
                                  label="#{bundle.Choose}"
                                  allowTypes="/(\.|\/)(gif|jpe?g|png)$/" 
                                  >
                    </p:fileUpload>
                    <p:growl id="messages" showDetail="true" life="2000" /> 
            </h:form>
        </ui:define>
        <ui:define name="guest">
            #{localeController.translate("RegisterFirst")}
        </ui:define>

    </ui:composition>
</html>
